<template>
    <div>
        <pagetitle type="2"></pagetitle>

        <div v-if="pageData && pageData.length > 0">
            <!-- <el-card class="messageItemCard" v-for="(item, index) in pageData.records" :key="item.id"> -->
            <el-card class="messageItemCard" v-for="(item, index) in pageData" :key="item.id">
                <div class="messageItem">
                    <img src="@/assets/image/mesg.png" class="messageIcon" alt="" />
                    <div class="messageRightBox">
                        <div class="messageRightBoxTitle">
                            <div class="messageRightBoxTitleName">{{ item.messageType }}</div>
                            <div class="messageRightBoxTitleTime">{{ item.lastModifyTime }}</div>
                        </div>
                        <div class="messageRightContent">{{ item.messageContent }}</div>
                        <div class="messageTypeBox">
                            <div class="messageTypeLeft">
                                <span class="messageClassify">{{ item.messageType }}</span>
                                <span class="messageTime">发送时间：{{ item.createTime }}</span>
                            </div>
                            <div class="messageTypeRight">
                                <span class="openMessage" @click="lookMessage(item, index)">{{ item.isMoer ? "收起" : "展开" }}</span>
                                <span class="openMessage" :class="item.isRead == 0 ? 'readType' : ''">{{ item.isRead == 0 ? "未读" : "已读" }}</span>
                            </div>
                        </div>
                        <div class="openMessageText" v-show="item.isMoer"><span>系统：</span>{{ item.messageStatus }}</div>
                    </div>
                </div>
            </el-card>

            <!-- <pagination :totalNum="pageData.total" @paginaClick="paginaClick"></pagination> -->
        </div>
        <!-- <nodata offsetTop="100px" v-else>
            <el-image slot="img" style="width: 260px; height: 240px" :src="require('@/assets/image/nodataimg.png')" fit="cover"></el-image>
        </nodata> -->
        <div v-else class="nodata">
            <el-image class="nodataimg" :src="require('@/assets/image/nodataimg.png')" fit="cover"></el-image>
            <p>暂无数据</p>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const pageData: any = ref([]);
const lookMessage = (a: any, b: any) => {};
// export default {
//     data() {
//         return {
//             pageData: [],
//             loading: "",
//             postData: {
//                 page: 1,
//                 size: 10,
//             },
//         };
//     },
//     mounted() {
//         this.getMessageList();

//         const main = document.querySelector(".el-main");
//         main.onscroll = () => {
//             //变量scrollTop是滚动条滚动时，距离顶部的距离
//             var scrollTop = main.scrollTop || main.scrollTop;
//             //变量windowHeight是可视区的高度
//             var windowHeight = main.clientHeight || main.clientHeight;
//             //变量scrollHeight是滚动条的总高度
//             var scrollHeight = main.scrollHeight || main.scrollHeight;
//             //滚动条到底部的条件
//             if (scrollTop + windowHeight == scrollHeight) {
//                 //写后台加载数据的函数
//                 console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
//                 this.loading = this.$loading({
//                     lock: true,
//                     text: "数据加载中~~~",
//                     spinner: "el-icon-loading",
//                     background: "rgba(0, 0, 0, 0.7)",
//                 });

//                 this.postData.size += 1;
//                 this.getMessageList();
//             }
//         };
//     },
//     methods: {
//         // 获取消息列表
//         getMessageList() {
//             this.$request.get(this.$newapi.messageList, this.postData).then((res) => {
//                 res.data.records.forEach((item) => {
//                     item.isMoer = false;
//                 });
//                 this.pageData = this.pageData.concat(res.data.records);
//                 if (this.loading) {
//                     setTimeout(() => {
//                         this.loading.close();
//                     }, 1000);
//                 }
//             });
//         },
//         // 展开收起消息
//         lookMessage(item, i) {
//             if (item.isRead == 0) {
//                 this.readMessage(item, i);
//             }
//             this.$set(this.pageData[i], "isMoer", !item.isMoer);
//             this.$forceUpdate();
//         },
//         // 消息设为已读
//         readMessage(item, i) {
//             this.$request.get(this.$newapi.messageRead, { id: item.id }).then((res) => {
//                 this.$set(this.pageData[i], "isRead", 1);
//                 this.$globalData.getMessageSum();
//                 this.$forceUpdate();
//             });
//         },
//         // 分页
//         // paginaClick(val) {
//         //     this.postData.size = val
//         //     this.getMessageList()
//         // }
//     },
// };
</script>
<style lang="scss" scoped>
.messageItemCard {
    margin-bottom: 40px;
}
.messageItem {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .messageIcon {
        width: 34px;
        height: 32px;
        margin-right: 20px;
    }
    .messageRightBox {
        width: 95%;
        .messageRightBoxTitle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            .messageRightBoxTitleName {
                font-size: 18px;
                font-weight: 400;
                color: #333333;
            }
            .messageRightBoxTitleTime {
                font-size: 16px;
                font-weight: 400;
                color: #666666;
            }
        }
        .messageRightContent {
            margin-bottom: 10px;
            font-size: 16px;
            font-weight: 400;
            color: #666666;
            line-height: 36px;
        }
        .messageTypeBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .messageClassify {
                font-size: 16px;
                font-weight: 400;
                color: #23b14d;
                padding-right: 40px;
                position: relative;
                &::after {
                    content: "";
                    position: absolute;
                    width: 1px;
                    height: 18px;
                    background: #666666;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 20px;
                }
            }
            .messageTime {
                font-size: 16px;
                font-weight: 400;
                color: #666666;
            }
            .messageTypeRight {
                font-size: 16px;
                font-weight: 400;
                color: #333333;
                span {
                    cursor: pointer;
                    margin-left: 25px;
                }
                .readType {
                    position: relative;
                    &::after {
                        content: "";
                        position: absolute;
                        width: 8px;
                        height: 8px;
                        background: #ff0000;
                        border-radius: 50%;
                    }
                }
            }
        }
        .openMessageText {
            width: 100%;
            height: 40px;
            border: 1px solid #eeeeee;
            border-radius: 6px;
            margin-top: 20px;
            padding: 0 20px;
            line-height: 40px;
            color: #333333;
            font-size: 16px;
            transition: all 0.2s;
            span {
                font-size: 18px;
            }
        }
    }
}
.nodata {
    margin-top: 100px;
    text-align: center;
    .nodataimg {
        width: 260px;
        height: 240px;
        margin-bottom: 20px;
    }
}
</style>
